<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/vue.min.js" charset="utf-8"></script>

		<link rel="stylesheet" type="text/less" href="../css/entry.less"/>
		<script src="../js/less.js" type="text/javascript" charset="utf-8"></script>

		<style media="screen">
			.mui-bar {
				box-shadow: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">个人中心</h1>
			</header>
			<div class="mui-content about-me-page">
				<div class="user-header-box">
					<div class="img-box"><img src="https://placehold.it/200x200" alt=""></div>
					<!-- 未登录 -->
					<div class="about-login">点击登录</div>


					<i @tap="gotoSettingPage" class="mui-icon mui-icon-gear"></i>
				</div>

				<div class="about-items-box">
					<div class="about-item">
						<div class="img-box"><i class="mui-icon mui-icon-help"></i></div>
						<div class="about-item-name">积分</div>
					</div>
					<div class="about-item">
						<div class="img-box"><i class="mui-icon mui-icon-help"></i></div>
						<div class="about-item-name">读币</div>
					</div>
					<div class="about-item">
						<div class="img-box"><i class="mui-icon mui-icon-help"></i></div>
						<div class="about-item-name">佣金</div>
					</div>
				</div>

				<ul class="mui-table-view">
					<li v-for="temp in itemList" class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<i class="mui-icon mui-icon-help"></i>
							<span class="about-item-entry">{{temp.name}}</span>
						</a>
					</li>
				</ul>

			</div>

		</div>
		<script type="text/javascript">
			mui.init()

			new Vue({
				el: '#app',
				data: {
					itemList: [
						{icon: 'mui-icon-help', name: '系统通知'},
						{icon: 'mui-icon-help', name: '会员等级'},
						{icon: 'mui-icon-help', name: '消费记录'},
						{icon: 'mui-icon-help', name: '浏览历史'},
						{icon: 'mui-icon-help', name: '我的分销'},
						{icon: 'mui-icon-help', name: '订阅会员'},
						{icon: 'mui-icon-help', name: '我的评论'},
						{icon: 'mui-icon-help', name: '操作指引'},
						{icon: 'mui-icon-help', name: '读者反馈'},
						{icon: 'mui-icon-help', name: '账户管理'},
					],
				},
				methods: {
					gotoSettingPage: function() {
						mui.openWindow({
							url: 'settingPage.html?uid=123',
							id: 'setting',
							extras: {
								uid: 123,
							},
						})
					}
				},
			})

		</script>

	</body>
</html>
